<template>
	<view class="content">
		<up-search placeholder="请输入" v-model="keyword"></up-search>
		<up-swiper v-if="bannerList.length" :list="bannerList" keyName="image" radius="8" showTitle :autoplay="true"
			heigth="160"></up-swiper>
		<up-notice-bar :text="text1"></up-notice-bar>

		<view class="list">
			<up-waterfall v-model="flowList" ref="uWaterfallRef">
				<template v-slot:left="{leftList}">
					<view class="demo-water" v-for="(item,index) in leftList" :key="index"
					@click="goToDetail(item.id)" 
					>
						<up-lazy-load 
						      
						      threshold="-450" 
						      border-radius="10" 
						      :image="item.img"
						      :index="index">
						    </up-lazy-load>

						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.times}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								{{item.tag[0]}}
							</view>
							<view class="demo-tag-text">
								{{item.tag[1]}}
							</view>
						</view>
						<view class="isDot" v-if="item.isDot">
							{{item.isDot}}
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-water" v-for="(item,index) in rightList" :key="index"
					@click="goToDetail(item.id)" >
						<up-lazy-load 
						      threshold="-450" 
						      border-radius="10" 
						      :image="item.img"
						      :index="index">
						    </up-lazy-load>

						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.times}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								{{item.tag[0]}}
							</view>
							<view class="demo-tag-text">
								{{item.tag[1]}}
							</view>
						</view>
						<view class="isDot" v-if="item.isDot">
							{{item.isDot}}
						</view>
					</view>
				</template>

			</up-waterfall>
			<view v-if="showButton" @click="toTop" class="topClass">
				<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
			</view>
		</view>


	</view>
</template>
<script setup>
	import {
		getBanner,
		getHomeList
	} from '../../api/api';
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	const keyword = ref('')
	const bannerList = ref([])
	const text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
	const loadStatus = ref('loadmore')
	const flowList = ref([])
	const showButton = ref(0);
	onLoad(() => {
		getBanner()
			.then(res => {
				console.log('res', res);
				bannerList.value = res.bannerList
			})
			.catch(err => {
				console.error('Failed to load banner:', err);
				uni.showToast({
					title: '加载失败: ' + (err.message || '服务器异常'),
					icon: 'none'
				});
			});
		getHomeList()
			.then(res => {
				console.log('res', res);
				flowList.value = res
			})
			.catch(err => {
				console.error('Failed to load banner:', err);
				uni.showToast({
					title: '加载失败: ' + (err.message || '服务器异常'),
					icon: 'none'
				});
			});

	});
	//无限加载瀑布流
	onReachBottom(() => {
		// alert("触底")
		setTimeout(() => {
			addRandomData()
		}, 1000)
	})
	const addRandomData = () => {
		for (let i = 0; i < 10; i++) {
			let index = uni.$u.random(0, flowList.value.length - 1);
			let item = JSON.parse(JSON.stringify(flowList.value[index]));
			item.id = uni.$u.guid()
			flowList.value.push(item);

		}
	}
	onPageScroll((e) => {
		if (e.scrollTop > 600) {
			showButton.value = 1
		} else {
			showButton.value = 0
		}
	})
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	};
const goToDetail = (id) => {
  uni.navigateTo({
    // 使用绝对路径（推荐）
    url: '/pages/detail/detail?id=' + id,
    
    fail: (err) => {
      console.error('跳转失败详情:', err);
      uni.showToast({
        title: '页面不存在，请检查路径',
        icon: 'none'
      });
    }
  });
}
	
</script>

<style lang='scss' scoped>
	.content {
		padding: 20rpx 20rpx;

		.list {
			margin: 30rpx 0;

			.demo-water {
				margin: 10rpx 10rpx 10rpx 0;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 16rpx;
				position: relative;

				.demo-title {
					font-size: 30rpx;
					margin-top: 10rpx;
					color: #303133;
				}

				.demo-price {
					font-size: 24px;
					color: #777;
					margin-top: 10rpx;
				}

				.demo-tag {
					display: flex;
					margin-top: 10rpx;

					.demo-tag-owner {
						border: 1px solid rgb(252, 163, 129);
						color: #ffaa00;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;

					}

					.demo-tag-text {
						border: 1px solid #00aaff;
						color: #00aaff;
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx
					}

				}


			}

			.isDot {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 20rpx;
				color: #fff;
				line-height: 32rpx;
				background-color: #ff0000;
				text-align: center;
				border-radius: 10rpx;
				padding: 4rpx 10rpx;
			}
		}

		.topClass {
			position: fixed;
			bottom: 120rpx;
			right: 30rpx;
			background-color: rgba(0, 0, 0, .5);
			padding: 20rpx;
			width: 44rpx;
			height: 44rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>